<template>
	<view class="content">

		<!-- 搜索 -->
		<view class="search">
			<input class="text" type="text" v-model="searchData" />
			<view class="btn" @click="__searchChangGuanList()">
				搜索
			</view>
		</view>

		<!-- 地址组件 -->
		<view class="map-check">
			<!-- <view class="left-title" @tap="open">
				<icon type="location-filled" color='#5e6d82' size="26" v-if="cityData.city != ''" />
				<p class="p" v-if="cityData.city != ''">{{cityData.province}}</p>
				<p class="p" v-if="cityData.city != ''">{{cityData.city}}</p>
				<p class="p" v-if="cityData.city != ''">{{cityData.area}}</p>
				<view class="uni-input" v-if="cityData.city == ''">
					地址选择
				</view>
			</view> -->
			<view class="">
				
			</view>
			<view class="right-km">
				<picker @change="bindPickerChange" :value="km_index" :range="km_data.map(item => item.name)">

					<view class="uni-input">距离{{ km_data[km_index]?.name }}</view>
				</picker>
				<view class="btn" @click="getMi()">
					搜索
				</view>
			</view>
		</view>
		<!-- <view>
			<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
				@confirm="confirm" @cancel="cancel" :visible="visible" />
		</view> -->
		<view class="item-content">
			<view class="item-box" v-for="(item,i) in viewchangguanData" @click="gotoItem(item.id,item)" :key="i">
				<view class="item" v-if="kmCheck(item,km_data[km_index].km)">
					<view class="left">
						<image class="img" :src="base64Img(item.image)" alt="" />
					</view>
					<view class="right">
						<view class="title">
							{{item.name}}
						</view>
						<view class="text-box">
							<view class="h1">
								营业时间：
							</view>
							<view class="h2">
								{{item.opening_hours_am}}
							</view>
							<view class="h3">
								{{item.opening_hours_pm}}
							</view>
							<view class="h4">
								{{item.opening_hours_night}}
							</view>
						</view>
						<view class="juli" v-if="juli" style="">
							<span>距您：{{ item.m.toFixed(2) }}km</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		getChangGuanList,
		searchChangGuanList,
		getOpenId
	} from '../../api/api.js'
	
	import {
		getUserInfo
	} from '@/api/mine_api.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		base64Img,
		getDistance
	} from '../../tools/tools.js'
	// 多层框引入
	// import cityPicker from '../../uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'

	// 页面显示存储
	const viewchangguanData = ref([])
	// 场馆api数据存储
	const changguanData = ref([])
	// 排序数据存储
	const paixuData = ref([])
	// 搜索数据
	const searchData = ref('')
	// 城市选择组件
	const visible = ref(false)
	const maskCloseAble = ref(true)
	const str = ref({})
	const defaultValue = ref('')
	const column = ref(3)
	// 城市存储
	const cityData = ref({
		province: '',
		city: '',
		area: ''
	})
	// 公里数搜索
	const km_index = ref(0)
	// 距离存储
	const km_data = [{
			'name': '10km',
			'km': 10
		},
		{
			'name': '5km',
			'km': 5
		},
		{
			'name': '4km',
			'km': 4
		},
		{
			'name': '3km',
			'km': 3
		},
		{
			'name': '2km',
			'km': 2
		},
		{
			'name': '1km',
			'km': 1
		}
	];

	// 距离是否显示
	const juli = ref(false)

	// 用户位置保存
	const userXY = reactive({
		X: '',
		Y: ''
	})
	// 距离选择器
	const bindPickerChange = (event) => {
		km_index.value = event.detail.value;
	};
	// 地址组件开启
	const open = () => {
		visible.value = true
	}
	// 距离判断
	const kmCheck = (itemKm, KmData) => {
		// console.log('外层 返回True', itemKm);
		if (juli.value != false) {
			// console.log('进入内层', Number(itemKm.m), KmData);
			if (Number(itemKm.m) <= KmData) {
				// console.log('小于');
				return true
			} else {
				// console.log('大于');
				return false
			}
		}
		return true
	}


	// 不搜索
	const __getChangGuanList = () => {
		getChangGuanList().then((res) => {
			console.log(res)
			viewchangguanData.value = res.values
			changguanData.value = res.values
			let data = res.values
			console.log('场馆数据', changguanData.value);
		})
	}
	// 排序函数

	// 搜索顶部1 搜索场馆
	const __searchChangGuanList = () => {
		searchChangGuanList(searchData.value).then((res) => {
			viewchangguanData.value = res.values
			juli.value = false
		})
	}
	// 搜索顶部2 搜索在多少千米以内的

	const getMi = () => {
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				const userXY = {
					X: res.longitude,
					Y: res.latitude
				};
				paixuData.value = changguanData.value;
				let changguan = paixuData.value

				// 计算每个对象的距离并保存到 data.m 中
				for (let i = 0; i < changguan.length; i++) {
					let data = changguan[i];
					if (data.latitude && data.longitude) {
						data.m = getDistance(data.longitude, data.latitude, userXY.X, userXY.Y);
						console.log(`第${i + 1}`, data.name, data.m);
					} else {
						data.m = false;
					}
				}

				// 根据距离对数组进行排序
				let sortedData = changguan.sort((a, b) => {
					// 如果 m 是 false, 把它排到最后
					if (a.m === false) return 1;
					if (b.m === false) return -1;
					return a.m - b.m;
				});
				console.log('排序后数据', sortedData);
				viewchangguanData.value = sortedData
				juli.value = true
				console.log(viewchangguanData.value);
			},
			fail: function(err) {
				console.error('获取位置失败', err);
			}
		});
	};



	// 计算经纬度距离

	// 计算经纬度距离循环调用
	const getKm = (sjX, sjY) => {
		let kmhdata = getDistance(sjX, sjY, userXY.X, userXY.Y)
		return kmhdata
	}
	const confirm = (val) => {
		console.log('地点选择结果：', val)
		str.value = val
		// 省
		cityData.value.province = val.provinceName
		// 市
		cityData.value.city = val.cityName
		// 区
		cityData.value.area = val.areaName

		visible.value = false
	}

	const cancel = () => {
		visible.value = false
	}

	const onShareAppMessage = (res) => {
		if (res.from === 'button') {
			console.log(res.target)
		}
		return {
			title: 'data-cityPicker省市区地址选择器！',
			path: '/pages/cityPicker/cityPicker'
		}
	}

	const onShareTimeline = (res) => {
		if (res.from === 'button') {
			console.log(res.target)
		}
		return {
			title: 'data-cityPicker省市区地址选择器！'
		}
	}

	const gotoItem = (id, item) => {
		console.log(id);
		uni.navigateTo({
			url: `/pages/changdi_view/changdi_view?id=${id}&data=${encodeURIComponent(JSON.stringify(item))}`
		});
	}



	const _getuseropenid = () => {
		uni.login({
			provider: 'weixin', //使用微信登录
			onlyAuthorize: true,
			success: function(res1) {
				getOpenId(res1.code).then((res2) => {
					console.log(res2);
					let data = {
						openid: res2.open_id
					}
					uni.setStorage({
						key: 'openid',
						data: data,
					});
				})
			}
		});
	}
	




	onLoad(() => {
		__getChangGuanList()
		_getuseropenid()
	})
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f5f5f6;
		padding: 10px 0 0 0;
		font-size: 14px;
		min-height: 100vh;

		.search {
			border: 2px solid #2ab4ff;
			margin: 0 10px 10px 10px;
			border-radius: 10px;
			display: flex;
			justify-content: space-between;
			background-color: #f5f5f6;

			.text {
				margin: 10px 0px 10px 14px;
				width: calc(100% - (24px + 26px + 2em));
			}

			.btn {
				padding: 10px 16px;
				background-color: #2ab4ff;
				border-radius: 0 8px 8px 0;
				color: white;
			}
		}

		.map-check {
			padding: 0 14px;
			display: flex;
			font-size: 16px;
			justify-content: space-between;

			.left-title {
				display: flex;
				justify-content: space-between;

				.p {
					margin-right: 10px;
					white-space: nowrap;
					/* 禁止换行 */
					overflow: hidden;
					/* 隐藏溢出的内容 */
					text-overflow: ellipsis;
					max-width: 70px;
					display: block;
				}
			}

			.right-km {
				display: flex;

				.uni-input {
					margin-right: 10px;
					line-height: 26px;
				}

				.btn {
					margin-right: 10px;
					border: 1px solid #2ab4ff;
					border-radius: 4px;
					font-size: 14px;
					padding: 5px 7px;
				}
			}
		}

		.list-contert {
			padding: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-height: calc(100vh - 40px);

			.list-view-item {
				padding: 10px;
				margin-bottom: 20px;
				background-color: #ffffff;
				border-radius: 10px;
				display: flex;

				.left-content {
					width: 120px;

					.img {
						height: 100px;
						width: 100px;
						border-radius: 10px;
					}
				}

				.right-content {
					width: 100%;
					padding-left: 10px;

					.title {
						font-weight: 700;
						overflow: hidden;
					}

					.right-content-bottom-title {
						margin-top: 6px;
						font-size: 10px;
					}

					.juli {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						font-size: 10px;
					}
				}


			}

			.bottom-title {
				text-align: center;
				font-size: 12px;
				color: gainsboro;
			}
		}


		.item-content {
			.item-box {
				.item {
					margin-bottom: 20px;
					background-color: #ffffff;
					border-radius: 10px;
					margin: 10px;
					padding: 10px;
					display: flex;

					.left {
						.img {
							height: 100px;
							width: 100px;
							border-radius: 10px;
						}

						padding-right: 10px;
					}

					.right {
						width: 100%;

						.title {
							font-size: 12px;
							font-weight: 700;
							overflow: hidden;
						}

						.text-box {
							margin-top: 10px;
							font-size: 10px;
						}

						.juli {
							width: 100%;
							display: flex;
							justify-content: flex-end;
							font-size: 10px;
						}
					}
				}
			}
		}


	}
</style>